export class ReminderList {
    constructor(onDeleteReminder) {
        this.onDeleteReminder = onDeleteReminder;
        this.reminders = [];
        this.container = null;
    }

    setReminders(reminders) {
        this.reminders = reminders;
        if (this.container) {
            this.renderContent();
        }
    }

    addReminder(reminder) {
        this.reminders.push(reminder);
        if (this.container) {
            this.renderContent();
        }
    }

    deleteReminder(id) {
        this.reminders = this.reminders.filter(r => r.id !== id);
        if (this.container) {
            this.renderContent();
        }
    }

    render() {
        if (!this.container) {
            this.container = document.createElement('div');
            this.container.className = 'reminder-list';
        }
        this.renderContent();
        return this.container;
    }

    renderContent() {
        if (this.reminders.length === 0) {
            this.container.innerHTML = '<p class="no-reminders">暂无提醒事项</p>';
            return;
        }

        const listHTML = this.reminders.map(reminder => `
            <div class="reminder-item" data-id="${reminder.id}">
                <div class="reminder-content">
                    <div class="reminder-text">${reminder.text}</div>
                    <div class="reminder-time">${this.formatTime(reminder.time)}</div>
                </div>
                <button class="delete-btn" data-id="${reminder.id}">删除</button>
            </div>
        `).join('');

        this.container.innerHTML = listHTML;
        this.bindEvents();
    }

    bindEvents() {
        const deleteButtons = this.container.querySelectorAll('.delete-btn');
        deleteButtons.forEach(button => {
            button.addEventListener('click', (e) => {
                const id = parseInt(e.target.dataset.id);
                this.onDeleteReminder(id);
            });
        });
    }

    formatTime(isoString) {
        const date = new Date(isoString);
        return date.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
        });
    }
}
    